import { CloseOutlined } from '@ant-design/icons';
import { Button, Modal } from 'antd';
import type { ReactNode } from 'react';
import { useState } from 'react';

import styles from './index.module.less';

interface CusConfirmProps {
  children?: ReactNode;
  onConfirm?: (e: any) => void; // 点击确定的时候触发
  onCancel?: (e: any) => void; // 点击取消的时候触发
  isAlert?: boolean; // 是否展示"提示"文本
  width?: number; // 弹出层的宽度
  content?: ReactNode; // 删除提示内容
  onOkText?: string; // 确定按钮的文本内容
  onCancelText?: string; // 取消按钮的文本内容
  zIndex?: number;
}

export default ({
  children,
  onConfirm,
  onCancel,
  isAlert = true,
  width = 450,
  content = '确定要删除吗？',
  onOkText = '确定',
  onCancelText = '取消',
  zIndex = 1051,
}: CusConfirmProps) => {
  const [visible, setVisible] = useState(false); // 是否弹出选择的模态框
  return (
    <span>
      {children && (
        <span
          onClick={(e) => {
            e.stopPropagation();
            setVisible(true);
          }}
        >
          {children}
        </span>
      )}

      <Modal
        width={width}
        centered
        visible={visible}
        zIndex={zIndex}
        footer={false}
        closeIcon={<CloseOutlined style={{ fontSize: 14, color: '#bbb' }} />}
        onCancel={(e: any) => {
          setVisible(false);
          onCancel?.(e);
        }}
      >
        <div className={styles.confirmBox}>
          <div>
            {isAlert && <div className={styles.alert}>提示</div>}
            <div>{content}</div>
          </div>
          <div className={styles.bottomBtn}>
            <Button
              onClick={(e) => {
                onCancel?.(e);
                setVisible(false);
              }}
            >
              {onCancelText}
            </Button>
            &emsp;
            <Button
              type="primary"
              onClick={(e: any) => {
                onConfirm?.(e);
                setVisible(false);
              }}
            >
              {onOkText}
            </Button>
          </div>
        </div>
      </Modal>
    </span>
  );
};
